<template>
  <div class="all">
    <div class="container">
      <vue-scroll :ops="scollOptions">
        <div class="create-developer-table">
          <div class="header">
            <el-form
              slot="body"
              :inline="true"
              :model="searchForm"
              label-position="left"
              class="search-form"
            >
              <el-form-item label="商品名称:">
                <el-input
                  v-model="searchForm.name"
                  placeholder="请输入"
                  clearable
                  size="mini"
                />
              </el-form-item>
              <el-form-item label="商品类别:">
                <el-select
                  size="mini"
                  clearable
                  v-model="searchForm.category_id"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in categoryList"
                    :key="item.id"
                    :label="item.category_name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="商品状态:">
                <el-select
                  size="mini"
                  clearable
                  v-model="searchForm.state"
                  placeholder="请选择"
                >
                  <el-option label="已出租" :value="1"> </el-option>
                  <el-option label="未出租" :value="2"> </el-option>
                  <el-option label="未发布" :value="3"> </el-option>
                  <el-option label="已下架" :value="4"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="审核状态:">
                <el-select
                  size="mini"
                  clearable
                  v-model="searchForm.review_status"
                  placeholder="请选择"
                >
                  <el-option label="未审核" :value="1"> </el-option>
                  <el-option label="已审核" :value="2"> </el-option>
                  <el-option label="已驳回" :value="3"> </el-option>
                  <el-option label="审核中" :value="4"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-button
                  type="primary"
                  size="mini"
                  @click.native="getTableData"
                >
                  搜索
                </el-button>
                <el-button type="primary" size="mini" @click.native="add">
                  新增
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="developerTable">
            <page-table
              ref="pageTable"
              :table-data="table.tbodyData"
              :header-data="table.headerData"
              :page-data="pageData"
              cell-key=""
              @handle-current-change="handleCurrentChange"
              @handle-size-change="handleSizeChange"
            >
              <template slot="operate" slot-scope="scope">
                <span>
                  <a
                    v-if="
                      scope.data.state === 3 && scope.data.review_status !== 4
                    "
                    class="text"
                    @click="release(scope.data)"
                    >发布</a
                  >
                  <a
                    v-if="scope.data.state === 4"
                    class="text"
                    @click="grounding(scope.data)"
                    >上架</a
                  >
                  <a
                    v-if="scope.data.state === 2"
                    class="text"
                    @click="nogrounding(scope.data)"
                    >下架</a
                  >
                  <a class="text" @click="edit(scope.data)">编辑</a>
                  <a class="text" @click="delet(scope.data)">删除</a>
                </span>
              </template>
              <template slot="state" slot-scope="scope">
                <span>
                  {{
                    scope.data.state === 1
                      ? "已出租"
                      : scope.data.state === 2
                      ? "未出租"
                      : scope.data.state === 3
                      ? "未发布"
                      : "已下架"
                  }}
                </span>
              </template>
              <template slot="review_status" slot-scope="scope">
                <span>
                  {{
                    scope.data.review_status === 1
                      ? "未审核"
                      : scope.data.review_status === 2
                      ? "已审核"
                      : scope.data.review_status === 3
                      ? "已驳回"
                      : "审核中"
                  }}
                </span>
              </template>
              <template slot="goods_img" slot-scope="scope">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.data.goods_img"
                  :fit="fit"
                ></el-image>
              </template>
              <template slot="fineness" slot-scope="scope">
                <span>
                  {{
                    scope.data.fineness === 1
                      ? "基本报废"
                      : scope.data.fineness === 2
                      ? "使用功能受损"
                      : scope.data.fineness === 3
                      ? "破损严重"
                      : scope.data.fineness === 4
                      ? "有破损"
                      : scope.data.fineness === 5
                      ? "轻微破损"
                      : scope.data.fineness === 6
                      ? "有明显擦痕"
                      : scope.data.fineness === 7
                      ? "有轻微擦痕"
                      : scope.data.fineness === 8
                      ? "有使用痕迹"
                      : scope.data.fineness === 9
                      ? "基本全新"
                      : scope.data.fineness === 10
                      ? "全新"
                      : ""
                  }}
                </span>
              </template>
              <template slot="price" slot-scope="scope">
                <span>{{ scope.data.price }}元</span></template
              >
            </page-table>
          </div>
        </div>
      </vue-scroll>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="20%"
      :before-close="handleClose"
    >
      <el-form :inline="true" :model="obj" :rules="rules" ref="objForm">
        <el-form-item label="商品名称：" prop="name">
          <el-input v-model="obj.name" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品类别：" prop="category_id">
          <el-select
            size="mini"
            v-model="obj.category_id"
            placeholder="请选择商品类别"
          >
            <el-option
              v-for="item in categoryList"
              :key="item.id"
              :label="item.category_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格：" prop="price">
          <el-input v-model="obj.price" placeholder="请输入商品价格"></el-input>
        </el-form-item>
        <el-form-item label="商品成色：" prop="fineness">
          <el-select
            size="mini"
            v-model="obj.fineness"
            placeholder="请选择商品成色"
          >
            <el-option
              v-for="item in finenessList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品图片：">
          <el-upload
            action="/python/upload"
            :show-file-list="false"
            class="avatar-uploader"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="onSubmit" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import PageTable from "@/components/table/PageTable";
import {
  getGoodList,
  addGood,
  updateGood,
  deletGood,
} from "@/api/shopping/index";
import { getCategoryNameList } from "@/api/developerServe/index";
import { formatDateTime } from "@/utils/tools";
export default {
  components: {
    PageTable,
  },
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        category_id: [
          { required: true, message: "请选择商品类别", trigger: "change" },
        ],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
        fineness: [
          { required: true, message: "请选择商品成色", trigger: "change" },
        ],
      },
      finenessList: [
        {
          id: 1,
          name: "基本报废",
        },
        {
          id: 2,
          name: "使用功能受损",
        },
        {
          id: 3,
          name: "破损严重",
        },
        {
          id: 4,
          name: "有破损",
        },
        {
          id: 5,
          name: "轻微破损",
        },
        {
          id: 6,
          name: "有明显擦痕",
        },
        {
          id: 7,
          name: "有轻微擦痕",
        },
        {
          id: 8,
          name: "有使用痕迹",
        },
        {
          id: 9,
          name: "基本全新",
        },
        {
          id: 10,
          name: "全新",
        },
      ],
      searchForm: {
        name: "",
        category_id: "",
        state: "",
        review_status: "",
      },
      table: {
        headerData: [
          {
            prop: "id",
            label: "商品ID",
            align: "center",
            headerAlign: "center",
            width: "100px",
          },
          {
            prop: "name",
            label: "商品名称",
            align: "center",
            headerAlign: "center",
            width: "100px",
          },
          {
            slot: "goods_img",
            label: "商品图片",
            align: "center",
            headerAlign: "center",
            width: "150px",
          },
          {
            prop: "category_name",
            label: "类别名称",
            align: "center",
            headerAlign: "center",
            width: "100px",
          },
          {
            slot: "price",
            label: "商品价格",
            align: "center",
            headerAlign: "center",
            width: "100px",
          },
          {
            slot: "review_status",
            label: "审核状态",
            align: "center",
            headerAlign: "center",
            width: "100px",
          },
          {
            slot: "fineness",
            label: "商品成色",
            align: "center",
            headerAlign: "center",
            width: "100px",
          },
          {
            prop: "click_count",
            label: "点击数",
            align: "center",
            headerAlign: "center",
            width: "100px",
          },
          {
            prop: "collectscount",
            label: "收藏数",
            align: "center",
            headerAlign: "center",
            width: "100px",
          },
          {
            prop: "commentscount",
            label: "评论数",
            align: "center",
            headerAlign: "center",
            width: "100px",
          },
          {
            prop: "likescount",
            label: "喜欢数",
            align: "center",
            headerAlign: "center",
            width: "100px",
          },
          {
            slot: "state",
            label: "商品状态",
            align: "center",
            headerAlign: "center",
            width: "100px",
          },
          {
            prop: "release_time",
            label: "上架时间",
            align: "center",
            headerAlign: "center",
            width: "200px",
          },
          {
            prop: "creater",
            label: "创建者",
            align: "center",
            headerAlign: "center",
            width: "100px",
          },
          {
            prop: "create_time",
            label: "创建时间",
            align: "center",
            headerAlign: "center",
            width: "200px",
          },
          {
            prop: "update_time",
            label: "修改时间",
            align: "center",
            headerAlign: "center",
            width: "200px",
          },
          {
            label: "操作",
            align: "center",
            headerAlign: "center",
            slot: "operate",
            width: "180px",
            fixed: "right",
          },
        ],
        tbodyData: [],
        handdleId: "",
      },
      pageData: {
        // 翻页数据
        total: 0, // 总条数
        page: 1,
        pageSize: 10,
        totalPage: 0, // 总页数
      },
      params: {
        page: 1,
        pageSize: 10,
      },
      /**
       * 滚动条样式
       */
      scollOptions: {
        scrollPanel: {
          scrollingX: false,
          scrollingY: true,
        },
        vuescroll: {
          mode: "native",
          sizeStrategy: "percent",
          detectResize: true,
          zooming: false,
        },
        bar: {
          onlyShowBarOnScroll: false,
          background: "#dedede",
          opacity: 1,
        },
      },
      dialogVisible: false,
      obj: {
        name: "",
        category_id: "",
        price: "",
        fineness: "",
        goods_img: "",
      },
      userData: {},
      title: "新增",
      categoryList: [],
      imageUrl: "",
    };
  },
  created() {},
  mounted() {
    this.userData = localStorage.getItem("userData");
    this.userData = JSON.parse(this.userData);
    this.getCategoryNameList();
    this.getTableData();
  },
  methods: {
    async grounding(obj) {
      await updateGood({
        id: obj.id,
        state: 2,
        release_time: formatDateTime(new Date()),
      });
      this.$message.success("操作成功！");
      this.getTableData();
    },
    async nogrounding(obj) {
      await updateGood({
        id: obj.id,
        state: 4,
        release_time: "",
      });
      this.$message.success("操作成功！");
      this.getTableData();
    },
    async release(obj) {
      await updateGood({
        id: obj.id,
        review_status: 4,
      });
      this.$message.success("发布成功！");
      this.getTableData();
    },
    handleAvatarSuccess(res, file) {
      this.obj.goods_img = "/python" + res.data;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    getCategoryNameList() {
      getCategoryNameList().then((res) => {
        this.categoryList = res.data;
      });
    },
    handleClose(done) {
      this.dialogVisible = false;
    },
    onSubmit() {
      this.$refs["objForm"].validate(async (valid) => {
        if (valid) {
          if (this.title === "新增") {
            await addGood({
              ...this.obj,
              user_id: this.userData.id,
            });
          } else {
            await updateGood({
              name: this.obj.name,
              category_id: this.obj.category_id,
              price: this.obj.price,
              fineness: this.obj.fineness,
              goods_img: this.obj.goods_img,
              id: this.obj.id,
            });
          }
          this.$message.success("操作成功！");
          this.handleClose();
          this.getTableData();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    delet(obj) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await deletGood({
            id: obj.id,
          });

          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getTableData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    edit(obj) {
      this.obj = { ...obj };
      this.imageUrl = obj.goods_img;
      this.title = "编辑";
      this.dialogVisible = true;
    },
    add() {
      this.obj = {
        name: "",
        category_id: "",
        price: "",
        fineness: "",
        goods_img: "",
      };
      this.imageUrl = "";
      this.title = "新增";
      this.dialogVisible = true;
    },
    /** 获取列表数据 */
    getTableData() {
      this.searchForm.currPage = this.pageData.page;
      this.searchForm.pageSize = this.pageData.pageSize;
      return getGoodList({
        ...this.searchForm,
        user_id: this.userData.name == "admin" ? null : this.userData.id,
      })
        .then((res) => {
          this.table.tbodyData = res.data.map((item) => {
            return {
              ...item,
              create_time: formatDateTime(item.create_time),
              update_time: formatDateTime(item.update_time),
              release_time: item.release_time
                ? formatDateTime(item.release_time)
                : "-",
              category_name:
                item.categorylist.length != 0
                  ? item.categorylist[0].category_name
                  : "类别不存在",
              creater:
                item.userlist.length != 0
                  ? item.userlist[0].name
                  : "用户不存在",
            };
          });
          this.pageData = {
            ...this.pageData,
            total: res.count,
            totalPage:
              res.count % this.pageData.pageSize === 0
                ? res.count / this.pageData.pageSize
                : parseInt(res.count / this.pageData.pageSize) + 1,
          };
        })
        .catch(() => {});
    },
    /** 跳转至第几页的操作 */
    handleCurrentChange(val) {
      this.params.page = val;
      this.getTableData();
    },
    /** 每页条数改变 */
    handleSizeChange(val) {
      this.pageData.pageSize = val;
      this.getTableData();
    },
  },
};
</script>
<style lang="scss" scoped>
.all {
  width: 100%;
  height: 100%;

  .container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .create-developer-table {
      background-color: #ffffff;
      padding: 15px;
      .header {
        margin-bottom: 20px;
        line-height: 60px;
        /deep/ .el-form {
          .el-form-item__content {
            vertical-align: middle;
            .el-range-editor.el-input__inner {
              height: 28px;
              line-height: 28px;
              vertical-align: middle;
              .el-range__icon,
              .el-range-separator,
              .el-range__close-icon {
                line-height: 23px;
              }
            }
          }
        }
      }
      .developerTable {
        .text {
          cursor: pointer;
          color: #3179d6;
          margin: 0 5px;
        }
      }
    }
    /deep/ .el-dialog {
      width: 32%;
    }
  }
}
.commonPopup {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba($color: #000000, $alpha: 0.6);
}
.showPopup {
  right: 0px;
}
.hidePopup {
  right: -550px;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
